<template>
  <div class="common-layout">
    <el-container>
      <el-aside >
        <h1>后台管理</h1>
        <el-menu :router="true">
                <el-menu-item index="/books">商品管理</el-menu-item>
                <el-menu-item index="2">订单管理</el-menu-item>
                <el-menu-item index="3">购物车管理</el-menu-item>
                <el-menu-item index="4">会员管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
            <div>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/books' }">商品管理</el-breadcrumb-item>
                    <el-breadcrumb-item>订单管理</el-breadcrumb-item>
                    <el-breadcrumb-item>购物车管理</el-breadcrumb-item>
                    <el-breadcrumb-item>会员管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div><el-button plain>退出</el-button></div>
        </el-header>
        <el-main>
            <!-- 二级路由窗口 -->
            <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>

</script>

<style scoped>
     .el-aside{
        width:150px;
        height: 100vh;
        background-color: black;
     }   
      .el-aside h1{
        width:150px;
        height: 60px;
        line-height:60px;
        color: white;
        text-align: center;
        font-size: 1.5rem;
     }   
     .el-header{
        height: 60px;
        line-height: 60px;
         background-color: black;
         display: flex;
         justify-content: space-between;
         color: white;
     }
     .el-header>div{
        height: 60px;
        
     }
    .el-breadcrumb{
        line-height: 60px;
    }
     .el-menu{
        background-color: black;
        
     }
     .el-menu li{
        color: white;
     }
    .el-menu li:hover{
        color: black;
     }
</style>

